<template>
  <div class="template1 ">
    <div class="leftNav cityList" :style="'height:'+(height+120)+'px'">
      <el-tree :data="data" node-key="id" :props="defaultProps" default-expand-all :expand-on-click-node="false" @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span class="operation">
            <el-button type="text" size="mini" @click="() => addCity(data)">修改</el-button>
            <el-button type="text" size="mini" @click="() => remove(node)" >删除</el-button>
          </span>
        </span>
      </el-tree>
      <el-button type="primary" class="addMenu" plain size="small" @click="addCity('add')">添加城市</el-button>
    </div>
    <div class="subject" :style="'width:84%;height:'+(height+120)+'px;padding-top:'+headH+'px;padding-bottom:0px;'">
      <div class="head" id="head1">
        <div class="tit">
          {{cityInfo.name}}
          <span class="add" @click="addArea('add')">添加区域</span>
        </div>
      </div>
      <el-main style="height:100% !important">
        <urbanAreaList></urbanAreaList>
      </el-main>
    </div>
    <addUrbanArea></addUrbanArea>
    <addCity></addCity>
  </div>
</template>
<script>

import urbanAreaList from "./urbanAreaList.vue"; //区域列表
import addUrbanArea from "./addUrbanArea.vue"; //添加区域
import addCity from "./addCity.vue"; //添加编辑城市

import {setTime,trim} from "../../assets/session.js";
import { request } from "../../assets/request.js";
export default {
  data() {
    return {
        height:'',
        data: [],
        defaultProps: { //设置默认的 对象属性 tree
          children: "children",
          label: "name"
        },
        cityInfo:'',
        headH:''
    };
  },
  created(){
    this.selectCtry()
    this.$root.$on('cityList',(data)=>{ //添加 编辑 之后的列表更新 
      this.selectCtry()
    })
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
      this.cityInfo=data
      this.$root.$emit("urbanAreaList", data);
    },
    addArea(type) {
      let cityInfo=this.cityInfo
      console.log(cityInfo)
      this.$root.$emit("addUrbanArea",type,cityInfo);
    },
    remove(row){ //删除城市
      let that=this
      event.cancelBubble = true; //阻止冒泡   handleNodeClick
      request.delAlert({
          name:'删除该城市',
          that,
          fn(obj){
              that.$message(obj)
              let url='city/'+row.key+'?greenToken='+request.greenToken
              request.ajaxDel({
                url,
                that,
                fn(res){
                  // console.log(res)
                  that.$message(obj)
                  that.selectCtry();
                }
              })
          }
      })
    },
    selectCtry(){ //查询所有城市
      let url = "city/all/city";
      let that=this   //解决this指向问题
      request.ajaxGet({
        url,
        that,
        fn(res){
          console.log(res)
          res.sort((a,b)=>a.id-b.id)
          that.data=res
          that.cityInfo=res[0]
          console.log(that.cityInfo)
          that.$root.$emit("urbanAreaList",res[0])
        }
      })
    },
    addCity(data){ //添加城市
    console.log(data)
        this.$root.$emit("addCity", data);
    },
  },
  mounted() {
    let height = `${document.documentElement.clientHeight}`;
    this.height = parseInt(height) - 182;
    let headH = document.getElementById("head1").offsetHeight;
    this.headH=headH
  },
  components: {
        urbanAreaList,   //城市区域列表
        addUrbanArea, //添加区域
        addCity,     //添加编辑城市
  }
};
</script>

<style lang="less" scoped>
.template1 {
    text-align: left;
    .head{
        .el-input{
            width:120px;
        }
        .el-select{
            width:150px;
        }
    }
}
.cityList{
  font-size: 14px;
  .el-tree-node__content{
    
    .custom-tree-node {
      position: relative;
        .operation{
          overflow: hidden;
          display: none;
        }
    }
  }
  .el-tree-node__content:hover .custom-tree-node{
      display: flex;
      align-items: center;
      flex: 1;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
  }
  .el-tree-node__content:hover .operation{
    display: block;
  }
}
</style>
<style scoped lang="less">
@import "../template1.less";
</style>
